<template>
	<a-modal :title="$t('Edit') + $t('Bucket')" v-model='ecreate' @cancel='cancelhandle' width='35%' @ok='subnew'
		:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
		<a-spin size="large"
			style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
			tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		<a-form :form='form'>
			<a-form-item :label="$t('Bucket') + $t('Name')" v-bind='formlayout' has-feedback disabled>
				<!-- /^[a-z](?!.*?\.{2}|.*?-)[a-z0-9\-./]{2,62}$/ -->
				<a-input disabled v-decorator="['name', {
					rules: [
						{ required: true, message: $t('Enter') + $t('Bucket') + $t('Name') },
						{ pattern: /^[a-z](?!.*?\.\.)[a-z0-9\-./]{2,62}$/, message: $t('Not_enter_special_characters5') }],
					initialValue: tarname.name
				}]" :placeholder="$t('Enter') + $t('Bucket') + $t('Name')">
				</a-input>
			</a-form-item>
			<a-form-item :label="$t('Owner')" v-bind="formlayout">
				<a-select v-decorator="['owner', {
					rules: [{ required: true, message: $t('Choose') + $t('Owner') }], initialValue: tarname.owner
				}]" @change="handleOwner">
					<!-- <a-select-option :value='item'  v-for="(item,index) in $store.state.basebucket.user" :key="index"> -->
					<a-select-option :value='item' v-for="(item, index) in $store.state.basebucket" :key="index">
						{{ item }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('Bucket') + $t('Quota')" v-bind="formlayout" v-if="isAdmin">
				<a-checkbox @change="onChange1" :checked="is_enabled">{{ $t('Active') }}</a-checkbox>

				<p v-if="is_enabled == true">
					<a-checkbox @change="onChange2" :checked="maxsize">{{ $t('Set-max-space') }}</a-checkbox>
					<a-checkbox @change="onChange3" :checked="maxobj">{{ $t('Set-max-obj') }}</a-checkbox>
				</p>
				<a-row>
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;"
							v-if="maxsize == true && is_enabled == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['quota.size.value',{
										rules:[{required:true,message:$t('Enter')+$t('Max-space')}],
										initialValue:oldsize
									}]" :placeholder="$t('E-g')+'512'">
							</a-input-number> -->
							<a-input style="width:100%" v-decorator="['quota.size.value', {
								rules: [
									{ required: true, message: $t('Enter') + $t('Max-space') },
									{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt2') }
								],
								initialValue: oldsize
							}]" :placeholder="$t('E-g') + '512'">
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback v-if="maxsize == true && is_enabled == true">
							<a-select v-decorator="['quota.size.unit', {
								rules: [{ required: true, message: $t('Enter') + $t('Unit') }]
								, initialValue: oldunit
							}]">
								<!-- ,{pattern:namePattern,message:$t('Not_enter_special_characters')} -->
								<a-select-option v-for='u in uint ' :key='u.val'>{{ u.label }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-form-item :label="$t('Max-obj')" has-feedback v-if="maxobj == true && is_enabled == true">
					<!-- <a-input-number :min='1' style="width:100%" v-decorator="['quota.objs',{
	                    rules:[{required:true,message:$t('Enter') + $t('Max-obj')}]
	                	,initialValue:max_objects
					}]" :placeholder="$t('E-g')+'100'">
	                </a-input-number> -->
					<a-input style="width:100%" v-decorator="['quota.objs', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Max-obj') },
							{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
						]
						, initialValue: max_objects
					}]" :placeholder="$t('E-g') + '100'">
					</a-input>
				</a-form-item>
			</a-form-item>

			<!--存储区域-->
			<!-- <a-form-item :label="$t('Storage-area')" v-bind="formlayout">
                注释<a-radio-group @change="onChange" v-model="value" disabled>
					<a-radio :value="1">{{$t('Default')}}</a-radio>
					<a-radio :value="2">{{$t('Customize')}}</a-radio>
				</a-radio-group>
                <div>
                	<a-select disabled v-decorator="['placement',{
	                    rules:[{required:true,message:$t('Choose')+$t('Storage-area')}],
						initialValue:tarname.placement
	                }]"  :placeholder="$t('Choose')+$t('Storage-area')">
						<a-select-option :value="item.id" v-for="(item,index) in $store.state.basebucket.zone" :key="index">{{item.id}}</a-select-option>
                	</a-select>
                	<ul v-if="tarname.placement==areadata.id">
                		<li><span class="slist">{{$t('Area')}}ID:</span>{{areadata.id}}</li>
                		<li><span class="slist">{{$t('Data-pool')}}:</span>{{areadata.data_pool}}</li>
                		<li><span class="slist">{{$t('Index-pool')}}:</span>{{areadata.index_pool}}</li>
                		<li><span class="slist">{{$t('Extra-pool')}}:</span>{{areadata.data_extra_pool}}</li>
                		<li><span class="slist">{{$t('Compress')}}:</span>{{areadata.is_compression == true?$t('Yes'):$t('No')}}</li>
                	</ul>
                </div>
            </a-form-item> -->
		</a-form>
	</a-modal>
</template>

<script>
import request from '@/request/request'

export default {
	props: ['ee', 'tarname', 'areadata'],
	data() {
		return {
			form: this.$form.createForm(this),
			formlayout: {
				labelCol: { span: 6 },
				wrapperCol: { span: 16 }
			},
			ecreate: false,
			tab: 1,
			value: 1,
			active1: true,
			active2: true,
			active3: true,
			oldunit: '',
			oldsize: '',
			maxsize: '',
			maxobj: '',
			uint: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
			change: {},
			spinning: false,
			is_enabled: this.tarname.is_enabled,
			max_objects: this.tarname.max_objects,
			isAdmin: false,
		}
	},
	watch: {
		ee(val) {
			this.ecreate = val
			this.part()
		}
	},
	methods: {
		onChange(e) {
			if (e.target.value == 1) {
				this.tab = 1
			} else if (e.target.value == 2) {
				this.tab = 2
			}
		},
		onChange1(e) {
			this.is_enabled = !this.is_enabled;
		},
		onChange2(e) {
			this.maxsize = !this.maxsize
		},
		onChange3(e) {
			this.maxobj = !this.maxobj
		},
		cancelhandle(e) {
			this.is_enabled = this.tarname.is_enabled;
			this.form.resetFields();
			this.spinning = false
			this.$emit('omodal', false, true);
		},
		subnew(e) {
			e.preventDefault();
			this.form.validateFields((err, val) => {
				if (!err) {
					this.spinning = true
					if (val.owner != this.tarname.owner) {
						val.id = this.tarname.id
					}
					request('post', 'rgw/bucket/update', val).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.form.resetFields();
						this.spinning = false
						// this.ecreate=false
						this.$emit('omodal', false, false)
					}).catch(err => {
						this.form.resetFields();
						this.spinning = false;
						this.$emit('omodal', false, false);
					})
				}
			})
		},
		part() { //对容量进行 数值 和 单位的划分
			this.is_enabled = this.tarname.is_enabled;
			// if(this.tarname.max_size !== '∞'){
			if (this.tarname.max_size !== -1) {
				this.change = this.tarname
				this.oldsize = parseInt(this.change.max_size.split(' ')[0])
				this.oldunit = this.change.max_size.split(' ')[1]
				this.maxsize = true
			} else {
				this.oldsize = ''
				this.oldunit = ''
				this.maxsize = false
			}
			// if(this.tarname.max_objects !== '∞' && this.tarname.max_objects !== ''){
			if (this.tarname.max_objects !== -1 && this.tarname.max_objects !== '') {
				this.maxobj = true
				let objects = this.tarname.max_objects
				if (String(objects).indexOf('.') != -1) {
					let max_files = objects.substring(0, objects.indexOf(' '));
					if (objects.indexOf('K') != -1) {
						objects = max_files * (10 ** 3);
					} else if (objects.indexOf('M') != -1) {
						objects = max_files * (10 ** 6);
					} else if (objects.indexOf('G') != -1) {
						objects = max_files * (10 ** 9)
					} else if (tobjects.indexOf('T') != -1) {
						objects = max_files * (10 ** 12)
					} else if (objects.indexOf('P') != -1) {
						objects = max_files * (10 ** 15)
					}
				}
				this.max_objects = objects;
			} else {
				this.maxobj = false
				this.max_objects = ''
			}
		},
		handleOwner(value) {
			if (value == 'admin') this.isAdmin = false
			else this.isAdmin = true
		}
	}
}
</script>

<style scoped>
ul {
	margin: 0;
	padding: 0 1em;
	background-color: #e6f4ff;
}

ul li {
	list-style: none;
}

.slist {
	margin-right: 1em;
	color: #1890ff;
}</style>
